<template>
    <div class="change_pass">
        <div class="top"></div>
        <van-nav-bar
                title="修改密码"
                fixed
                left-arrow
                @click-left="$router.go(-1)"
        />
        <div class="content">
            <div>
                <van-cell-group>
                    <van-field label="我的ID" disabled v-model="my_id" placeholder="123456" />
                    <van-field label="旧密码" v-model="old_pass" :error="oldPassError"   placeholder="请输入旧密码" />
                    <van-field label="新密码"  v-model="new_pass" :error="newPassError"  placeholder="请输入新密码" />
                    <van-field label="确认密码" v-model="que_new_pass" :error="queNewPassError" @change="handleQue"  placeholder="请再次输入新密码" />
                </van-cell-group>
                <div class="tip">提示: 密码至少6个字符</div>
            </div>
            <div style="text-align: center">
                <van-button style="background-color: #ACB2C7;border: none;box-shadow: none" type="primary" size="large" disabled v-if="!isOk">完成</van-button>
                <van-button type="primary" size="large" @click="setPassWord" style="border: none;" v-else :disabled="loading" :loading="loading" loading-text="修改中...">完成</van-button>
            </div>
        </div>

    </div>
</template>

<script>
    import {Notify,Field,CellGroup,Button,NavBar,Toast} from 'vant';
    export default {
        name: "scenicSpotHeating",
        components: {
            [Notify.name]: Notify,
            [CellGroup.name]: CellGroup,
            [Toast.name]: Toast,
            [NavBar.name]: NavBar,
            [Button.name]: Button,
            [Field.name]: Field
        },
        data() {
            return {
                message:'',
                loading: false,
                my_id: '',
                old_pass: '',
                new_pass: '',
                que_new_pass: '',
                oldPassError: false,
                newPassError: false,
                queNewPassError: false,
                isOk: false
                // userInfo:{}
            }
        },
        watch: {
            ifExist(newVal,oldVal){
                if(newVal){
                    this.isOk = true;
                }else{
                    this.isOk = false;
                }
            }
        },
        computed:{
            ifExist:function(){
                return this.old_pass.length > 6 && this.new_pass.length > 6 && this.que_new_pass.length > 6
            }
        },
        mounted() {
            this.my_id = JSON.parse(localStorage.getItem('userInfo')).id;
        },
        methods:{
            handleQue() {
                if (this.que_new_pass && this.que_new_pass.length > 0 ) {
                    this.queNewPassError = false;
                }
            },
            setPassWord() {
                // if (this.old_pass.length > 6 && this.new_pass.length > 6 && this.que_new_pass.length > 6) {
                    if (this.new_pass !== this.que_new_pass) {
                        this.queNewPassError = true;
                        Toast({message:'两次密码不一致！',duration: 800});
                        return;
                    } else {

                    }
                // } else {
                //     Toast({message:'密码最少6位！',duration: 800});
                //     return;
                // }
                this.loading = true;
                let params = {
                    old_password: this.old_pass,
                    password: this.new_pass
                };
                this.$http.post('system/admin/password/change',params)
                    .then((res) => {
                        if (res.status_code == 200) {
                            Toast({message:res.msg,duration: 1000});
                            this.old_pass = '';
                            this.new_pass = '';
                            this.que_new_pass = '';
                        } else {
                            Toast({message:res.msg,duration: 1000});
                        }
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        Toast({message:err.data.msg,duration: 1000});
                    })
            }
        }
    }
</script>
<style lang="less">
    .van-nav-bar--fixed{
        top: 0.2rem;
    }
   .change_pass{
       width: 100%;
       height: 100vh;
       background:rgba(248,248,250,1);
       .top{
           width: 100%;
           height: 0.2rem;
           background-color: #fff;
           position: fixed;
           top: 0px;
           left: 0px;
       }
       .van-cell{
           padding: 0.13rem 0.15rem;
       }
       .van-cell:nth-of-type(1){
           color: #878b95;
       }
       .van-hairline--top-bottom::after{
           border-width: 0rem;
       }
       .van-button{
           width: 3.43rem;
           height: 0.44rem;
           line-height: 0.44rem;
           font-size: 0.15rem;
       }
       .van-button--primary{
           background:rgba(66,108,255,1);
           box-shadow:0px 0.08rem 0.24rem 0px rgba(66,108,255,0.3);
       }
       .van-nav-bar{
           height: 0.5rem;
           line-height: 0.5rem;
       }
       .van-nav-bar__title{
           font-size: 0.18rem;
           font-weight:600;
           color:rgba(40,44,52,1);
       }
       .van-nav-bar .van-icon{
           color:#282C34;
           font-size: 0.2rem;
           font-weight: 600;
       }
       .content{
           width: 100%;
           padding-top: 0.8rem;
           .tip{
               padding: 0.17rem 0 0.27rem 0.16rem;
               font-size:0.12rem;
               font-weight:500;
               color:rgba(135,139,149,1);
           }
       }
   }
</style>